<script lang="jsx">
/**
 * @author lilinjie
 * @Description:
 */

import { defineComponent, onMounted } from 'vue'
import { useInjectData } from '@/context/order'
import { formatTime } from '@/utils/time'

export default defineComponent({
  name: 'OrderModal',
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  setup(props) {
    // 弹窗部分
    const {
      cuFilterForm,
      modelData,
      isEdit,
      onClickClose,
      onClickConfirm,
      onClickCreate,
      onClickEdit
    } = useInjectData()

    return () => {
      const { data } = props
      console.log(data)
      return (
          <div class="category-modal">
            <a-modal
                v-model:open={modelData.visible}
                onCancel={onClickClose}
                onOk={onClickConfirm}
            >
              <div class="modal-content">

                <div class="label-item">
                  <div class="label">订单编号</div>
                  <div class="value">{data.id}</div>
                </div>
                <div class="label-item">
                  <div class="label">订单总金额</div>
                  <div class="value">{data.totalAmount}</div>
                </div>
                <div class="label-item">
                  <div class="label">订单状态</div>
                  <div class="value">{data.orderStatus}</div>
                </div>
                <div class="label-item">
                  <div class="label">支付时间</div>
                  <div class="value">{formatTime(data.paymentTime)}</div>
                </div>
                <div class="label-item">
                  <div class="label">订单备注</div>
                  <div class="value">{data.remark}</div>
                </div>
                <div class="label-item">
                  <div class="label">使用的优惠券ID</div>
                  <div class="value">{data.couponId}</div>
                </div>
                <div class="label-item">
                  <div class="label">优惠券金额</div>
                  <div class="value">{data.couponAmount}</div>
                </div>
                <div class="label-item">
                  <div class="label">原价金额</div>
                  <div class="value">{data.originalTotalAmount}</div>
                </div>
                <div class="label-item">
                  <div class="label">运费</div>
                  <div class="value">{data.feightFee}</div>
                </div>
                <div class="label-item">
                  <div class="label">支付方式</div>
                  <div class="value">{data.payType}</div>
                </div>
                <div class="label-item">
                  <div class="label">发货时间</div>
                  <div class="value">{formatTime(data.deliveryTime)}</div>
                </div>
                <div class="label-item">
                  <div class="label">收货时间</div>
                  <div class="value">{formatTime(data.receiveTime)}</div>
                </div>
                <div class="label-item">
                  <div class="label">取消时间</div>
                  <div class="value">{formatTime(data.cancelTime)}</div>
                </div>
                <div class="label-item">
                  <div class="label">取消原因</div>
                  <div class="value">{data.cancelReason}</div>
                </div>
              </div>

            </a-modal>
          </div>
      )
    }
  }
})
</script>

<style lang="less">
@import '@/assets/less/common-style.less';

.modal-content {
  .flex(flex-start, normal);
  flex-direction: column;
  .label-item {
    //.flex(flex-start);
    display: grid;
    grid-template-columns: 130px 1fr;
    margin-bottom: 10px;
    .label {
       font-weight: bold;
       font-size: 16px;
       color: #333;
    }
    .value {
      font-size: 16px;
      color: #666;
      margin-left: 10px;
    }
  }
}
</style>
